<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> -->
    <link rel="stylesheet" type="text/css" href="./css/index.css">
    <title>myproject</title>
    <!-- 加载高德地图JSAPI -->
    <!-- JSAPI key搭配静态安全密钥以明文设置（不安全，建议开发环境用） -->
    <!-- <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: "f6ac0216fa8d13c0d0b4086547ad27d9",
        }; -->
    </script>
    <!-- 使用JSAPI Loader进行加载 -->
    <!-- <script src="https://webapi.amap.com/loader.js"></script> -->
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=0BYIsRG8czmn0lpvl0atUrLfNBpcRqyG"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=0BYIsRG8czmn0lpvl0atUrLfNBpcRqyG"></script>


</head>

<body>
    <div id="app">
        <!-- 参数设置 -->
        <div id="setting_container">
            <div id="setting">
                <!-- 获取位置，方式：拖拽；选择预设的城市；搜索城市 -->
                <div class="block">
                    <div class="first-title">
                        <span>1</span>.
                        <span>选择爆炸位置(可拖拽标记)</span>
                    </div>
                    <!-- <div>
                        <select v-model="selectedLocation" @change="setChooseLocation">
                            <option value="" disabled>或者在这里选择一个城市</option>
                            <option v-for="(city, index) in presetCitys" :value="city.name" :key="index">
                                {{city.name}}
                            </option>
                            <optgroup style="border-top: 1px dotted #ccc; margin: 5px 0" label="历史上的爆炸地点:"></optgroup>
                            <option v-for="(city, index) in historicalLocations" :value="city.location" :key="index">
                                {{city.name}}
                            </option>
                        </select>
                    </div>
                    <br /> -->
                    <div class="content">
                        <div class="set-single">
                            <input type="text" v-model="inputCity" placeholder="在这里输入城市名称"
                                style="margin-right: 0.5rem;" />
                            <button @click="setInputCity">完成输入</button>
                        </div>
                        <div class="set-single">
                            <input type="text" placeholder="或者在这里输入经度" v-model="inputLng" style="margin-right: 0.5rem;">
                            <input type="text" placeholder="在这里输入纬度" v-model="inputLat" style="margin-right: 0.5rem;">
                            <button @click="setInputPosi">完成输入</button>
                            <abbr-explain info="通常所说的地球地理经纬度指的是WGS-84坐标系的坐标，百度地图在境内所用的坐标系为：BD09。"></abbr-explain>
                        </div>
                    </div>
                </div>
                <!-- <hr style="margin-top: 5px; margin-bottom: 5px" /> -->
                <!-- 获取输入当量 -->
                <div class="block">
                    <div class="first-title">
                        <span>2</span>.
                        <span>输入当量(kt)</span>
                    </div>
                    <div class="content set-single">
                        <input type="number" v-model="inputYield" id="yield-input" @change="controlYieldInput()" />
                        <!-- <select v-model="inputYield" onchange="getElementById('inputyield').value=this.value;">
                            <option value="" disabled>或者在这里选择</option>
                            <option v-for="(option,index) in presetYields" :value="option.yield">
                                {{option.name}}
                            </option> -->
                        </select>
                    </div>
                </div>
                <!-- 爆炸参数选项设置 -->
                <div class="block">
                    <!-- 基本选项 -->
                    <div class="first-title">
                        <span>3</span>. <span>选项：</span>
                    </div>
                    <div class="content">
                        <div class="set-single">
                            <em><span>爆炸高度 </span></em>
                            <abbr-explain
                                info="地面爆炸是指核武器在地面或非常接近地面的地方引爆。空中爆炸意味着武器被引爆的高度足够高，其火球不接触地面。两者瞬时效应有所不同，辐射效应有明显区别，比如放射性落尘主要来自地面爆炸。">
                            </abbr-explain>
                            <em>：</em>
                            <input type="radio" value="AirBurst" name="detonatetype" v-model="detonateType">
                            <label>空中爆炸</label>
                            <input type="radio" value="SurfaceBurst" name="detonatetype" v-model="detonateType">
                            <label>地面爆炸</label>
                        </div>
                        <div class="set-single">
                            <em><span>其他效应</span>：</em>
                            <!-- <input type="checkbox" id="casualties_check" v-model="checkCasualty"
                                    title="根据爆炸点附近的人口密度和爆炸效应估计伤亡人数">
                                <label for="casualties_check">伤亡估计</label> -->
                            <input type="checkbox" id="fallout_check_2" v-model="checkFallout"
                                onchange="document.getElementById('fallout_check_1').checked=this.checked;"
                                title="放射性落尘是指从蘑菇云中掉落的尘埃、碎片和放射性产物">
                            <label for="fallout_check_2">放射性落尘范围估计</label>
                            <abbr-explain info="放射性落尘是指从蘑菇云中掉落的尘埃、碎片和放射性产物。如果为地面爆炸，勾选后将显示放射性落尘剂量率分布"></abbr-explain>
                            <input type="checkbox" title="显示超压大于或者等于0.34atm的范围内的设施" v-model="selectAround" />
                            受到破坏的周边设施
                            <abbr-explain info="显示超压大于或者等于0.34atm的范围内的设施。此范围内大多数住宅楼都会倒塌，受伤和死亡普遍可见"></abbr-explain>
                        </div>
                    </div>
                    <!-- 高级选项 -->
                    <div class="content">
                        <span>
                            <b>更多选项:</b>
                            <span id="showMore" @click="showMore">▼</span>
                        </span>
                        <br>
                        <div id="moresetting">
                            <span style="height: 5px; display: block"></span>
                            <!-- 空中爆炸参数 -->
                            <em>选择要展示的超压范围：</em>
                            <abbr-explain info="超压是指高于标准大气压的物理冲击波。此处单位为1个标准大气压(atm)。"></abbr-explain>
                            <ul style="margin-top: 2px; margin-bottom: 2px">
                                <input type="checkbox" name="psi" value="3000" v-model="selectedPress" />
                                204.0 atm (可以摧毁导弹发射井的压强)<br />
                                <input type="checkbox" name="psi" value="200" v-model="selectedPress" />
                                13.6 atm (极度严重破坏)<br />
                                <input type="checkbox" name="psi" value="20" checked="checked"
                                    v-model="selectedPress" />
                                1.36 atm (严重破坏)<br />
                                <input type="checkbox" name="psi" value="5" checked="checked" v-model="selectedPress" />
                                0.34 atm (中度破坏)<br />
                                <input type="checkbox" name="psi" value="1" checked="checked" v-model="selectedPress" />
                                0.068 atm (轻度破坏)<br />
                                <input type="checkbox" name="psi" id="psi_other_check_1" v-model="otherPressChecked" />
                                其他：
                                <input type="text" v-model="inputPress" @change="controlPresInput()" />
                                atm
                            </ul>
                            <em>空爆爆炸高度设置：</em>
                            <abbr-explain info="设置具体的爆炸高度，或者设置为使某超压范围最大的爆炸高度"></abbr-explain>
                            <ul style="margin-top: 2px; margin-bottom: 2px">
                                <input type="radio" name="ab_option" id="ab_option_max" value="0" v-model="ab_option"
                                    checked="checked" />
                                最大化所有超压范围
                                <abbr-explain info="展示不同的爆炸高度，每种爆炸高度使某一超压影响范围最大化"></abbr-explain>
                                <br />
                                <input type="radio" name="ab_option" id="ab_option_opt" value="1" v-model="ab_option" />
                                使该超压范围最大:
                                <input type="text" class="option_input" v-model="ab_inputPress"
                                    @change="controlPresInput()" />
                                atm<br />
                                <input type="radio" name="ab_option" id="hob_option_height" value="2"
                                    v-model="ab_option" />
                                设定爆炸高度:
                                <input type="text" v-model="ab_inputHeight" />
                                <select v-model="ab_selectedHUnit">
                                    <option value="0">ft</option>
                                    <option value="1">m</option>
                                    <option value="2">mi</option>
                                    <option value="3">km</option>
                                </select>
                            </ul>
                            <em>选择要展示的电离辐射范围：</em>
                            <!-- 此处关于rem的解释还需要再确认 -->
                            <abbr-explain info="此处的电离辐射是指爆炸产生的初期高能射线，主要由中子和γ射线组成。单位Sv是辐射剂量当量的单位"></abbr-explain>
                            <ul style="margin-top: 2px; margin-bottom: 2px">
                                <!-- 网页上显示的剂量单位为Sv， 用于计算的剂量单位为rem；1rem = 0.01Sv -->
                                <input type="checkbox" name="rem" value="5000" v-model="selectedDose" />
                                50 Sv (100%的死亡率)<br />
                                <input type="checkbox" name="rem" value="1000" v-model="selectedDose" />
                                10 Sv (若存在医疗条件，有95%的人死亡)<br />
                                <input type="checkbox" name="rem" value="600" v-model="selectedDose" />
                                6 Sv (若存在医疗条件，有80%的人死亡)<br />
                                <input type="checkbox" name="rem" value="500" v-model="selectedDose" />
                                5 Sv (若不进行治疗将有50%-80%的人死亡)<br />
                                <input type="checkbox" name="rem" value="100" v-model="selectedDose" />
                                1 Sv (可能因此患病，且癌症发生几率增高)<br />
                                <input type="checkbox" name="rem" id="rem_other_check_1" v-model="otherDoseChecked" />
                                其他：
                                <input type="text" class="option_input" name="rem_other_1" v-model="inputDose" />
                                Sv
                            </ul>
                            <em>选择要展示的热辐射范围：</em>
                            <abbr-explain info="热辐射是核爆炸产生的热能。这里的单位是卡路里每平方厘米(cal/cm²)。"></abbr-explain>
                            <ul style="margin-top: 2px; margin-bottom: 2px">
                                <input type="checkbox" name="therm" value="3rd-100" checked="checked"
                                    v-model="selectedHeat" />
                                100%造成三度烧伤<br />
                                <input type="checkbox" name="therm" value="2nd-100" v-model="selectedHeat" />
                                100%的概率造成二度烧伤<br />
                                <input type="checkbox" name="therm" value="1st-100" v-model="selectedHeat" />
                                100%的概率造成一度烧伤<br />
                                <input type="checkbox" name="therm" value="noharm-100" v-model="selectedHeat" />
                                100%不会造成烧伤的最小半径<br />
                                <input type="checkbox" name="therm" value="35" v-model="selectedHeat" />
                                干燥的木材会被引燃的半径 (35 cal/cm²)<br />
                                <input type="checkbox" name="therm" v-model="otherHeatChecked" />
                                其他：
                                <input type="text" v-model="inputHeat" />
                                cal/cm²
                            </ul>
                            <em>其他效果：</em>
                            <ul style="margin-top: 2px; margin-bottom: 2px">
                                <input type="checkbox" v-model="selectFireball" title="爆炸产生的火球的最大尺寸" />
                                火球
                                <br />
                                <input type="checkbox" v-model="selectCrater" title="假设地表为土壤，地面爆炸产生的弹坑的大小" />
                                弹坑
                                <abbr-explain info="假设地表为土壤，地面爆炸产生的弹坑的大小"></abbr-explain>
                                <br />
                                <input type="checkbox" title="显示超压大于或者等于0.34atm的范围内的设施" v-model="selectAround" />
                                受到破坏的周边设施
                                <abbr-explain info="显示超压大于或者等于0.34atm的范围内的设施。此范围内大多数住宅楼都会倒塌，受伤和死亡普遍可见"></abbr-explain>
                                <br />
                                <div style="margin-left: 0.5rem;">
                                    设施：<input type="text" v-model="facility" />
                                </div>
                                <input type="checkbox" name="other" id="check_cloud" v-model="selectMushroom"
                                    title="爆炸产生的蘑菇云稳定时的估计大小" />
                                蘑菇云大小
                                <abbr-explain info="爆炸产生的蘑菇云稳定时的估计大小"></abbr-explain>
                                <br />
                                <input type="checkbox" id="fallout_check_1" title="放射性落尘是指从蘑菇云中掉落的尘埃、碎片和放射性产物"
                                    onchange="document.getElementById('fallout_check_2').checked=this.checked;"
                                    id="fallout_check" v-model="checkFallout" />
                                放射性落尘<br />
                                <div style="margin-left: 0.5rem;">
                                    剂量率:
                                    <input type="text" v-model="doserates_out" />
                                    (单位Gy/h, 输入多个时以 , 分隔)
                                    <br />
                                    风速:
                                    <input type="text" title="爆炸地点的平均风速，单位：英里每小时。" v-model="inputWindV" />
                                    m/s
                                    <br />
                                    风向:
                                    <input v-model="inputWindA" />°(风速与东方向夹角)
                                    <br>
                                    (<a href="#" @click="getWind()" id="get_local_wind">获取爆炸地点风速风向</a><span
                                        id="wind_prog"></span>)
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="block">
                    <div class="first-title">
                        <span>4</span>.
                        <span>引爆</span>
                    </div>
                    <div class="content set-single">
                        <button id="detonate-btn" @click="launch();" title="引爆（或者重新引爆）" href="#">
                            引爆
                        </button>
                        <!-- <button id="button_probe" onclick="add_sample_marker(this.id);">
                            <span lang="capProbeLocation">添加探测标记</span> </button>-->
                    </div>
                </div>
                <!-- <hr id="basicoption_hr" style="margin-top: 5px; margin-bottom: 5px" /> -->
                <div id="result">
                    <div id="mushroom" class="block">
                        <div class="first-title" style="margin-left: 1rem;">蘑菇云估计大小</div>
                        <div class="imgcontent">
                            <img src="./img/mymushroom1.png" id="mushroom_img">
                            <div id="mushroom_dsc"></div>
                        </div>
                    </div>
                    <div id="crater" class="block">
                        <div class="first-title" style="margin-left: 1rem;">地面爆炸弹坑估计大小</div>
                        <div class="imgcontent">
                            <img src="./img/mycrater1.png" id="crater_img">
                            <div id="crater_dsc"></div>
                        </div>
                    </div>
                </div>
                <div id="error" class="block">
                    <div class="first-title" style="margin-left: 1rem;">错误信息</div>
                    <div id="errinfo" class="content"></div>
                </div>
            </div>
            <div id="setting_close" @click="toggleFooter()"></div>
        </div>
        <!-- 地图 -->
        <div id="map_container">
            <div id="show">
                <button class="show-btn" id="show_or_hide" @click="showorhide()">显示/隐藏:</button>
                <button class="show-btn" id="showthermal" @click="showThermal()">热辐射效应:显示</button>
                <button class="show-btn" id="showdose" @click="showDose()">早期电离辐射效应:显示</button>
                <button class="show-btn" id="showpressure" @click="showPressure()">冲击波超压效应:显示</button>
                <button class="show-btn" id="showfallout" @click="showFallout()">放射性落尘剂量率:显示</button>
                <button class="show-btn" id="showdetectmarker" @click="showDetectMarker">探测标记:隐藏</button>
            </div>
            <div id="setting_open" @click="toggleFooter()"></div>
            <div id="map"></div>
        </div>
    </div>
    <script src="https://unpkg.com/vue@3.2.31/dist/vue.global.js"></script>
    <script src="js/public.js"></script>
    <script src="js/overlays.js"></script>
    <script src="js/psi_interpolation.js"></script>
    <script src="js/effects.js"></script>
    <script src="js/fallout.js"></script>
    <script src="js/getWeather.js"></script>
    <script src="js/main.js"></script>
</body>

</html>